<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.components.permissionModal.permissionSetting')"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="600"
      :width="1000"
    >
      <Row :gutter="24" style="height: 300px">
        <Col :span="12">
          <Row style="height: 50%; overflow-y: scroll; overflow-x: hidden">
            <Col :span="24">
              <BasicTree
                checkable
                :treeData="treeData"
                :toolbar="true"
                :search="true"
                :title="t('routes.components.permissionModal.directory')"
              />
            </Col>
          </Row>
          <Row style="height: 50%; margin-top: 10px">
            <Col :span="24">
              <userPermission />
            </Col>
          </Row>
        </Col>
        <Col :span="12">
          <permissionSetting />
        </Col>
      </Row>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTree } from '/@/components/Tree/index';
  import { useI18n } from '/@/hooks/web/useI18n';

  import userPermission from './userPermission.vue';
  import permissionSetting from './permissionSetting.vue';

  const { t } = useI18n();

  const treeData = ref([
    {
      title: 'parent 1',
      key: '0-0',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '0-0-0' },
        {
          title: 'leaf',
          key: '0-0-1',
          children: [
            { title: 'leaf', key: '0-0-0-0' },
            { title: 'leaf', key: '0-0-0-1' },
          ],
        },
      ],
    },
    {
      title: 'parent 2',
      key: '1-1',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '1-1-0' },
        { title: 'leaf', key: '1-1-1' },
      ],
    },
    {
      title: 'parent 3',
      key: '2-2',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '2-2-0' },
        { title: 'leaf', key: '2-2-1' },
      ],
    },
  ]);

  // 提交表单
  const handleSubmit = () => {
    closeModal();
  };

  // 关闭弹窗
  const handleCancel = () => {
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });
</script>

<style lang="less" scoped></style>
